<template>
  <div class="bg-white flex" style="height: calc(100% - 10px); flex-direction: column">
    <div class="bg-white py-[6px] px-[6px] text-[16px]">客户往来邮件</div>
    <div class="flex-1">
      <VTable ref="tableRef" v-bind="tableOptions" class="m-table">
        <template #empty>
          <img src="~@/assets/images/table-empty.png" alt="" class="h-[160px] w-[260px] m-auto" />
        </template>
      </VTable>
    </div>
  </div>

  <ElDialog v-model="visible" destroyOnClose :onClosed="handleClose" title="查看详情" width="960">
    <div class="coup-dialog-mail-detail">
      <div class="detail-container">
        <div class="item" v-for="(item, i) in detail" :key="i">
          <div class="title">{{ item.label }}</div>
          <div class="value">{{ detailData[item.field] }}</div>
        </div>

        <div class="item">
          <div class="title">发件人/时间</div>
          <div class="value">{{ detailData.sender }} {{ detailData.receive_date_local }}</div>
        </div>

        <div class="item">
          <div class="title">邮件内容</div>
          <div class="value" v-html="detailData.html_content"></div>
        </div>
      </div>
    </div>
  </ElDialog>
</template>

<script setup lang="jsx">
import { crmOrderPost, apiMailReceivedDetail } from "../api"

const detail = reactive([
  { label: "来源渠道", field: "shop_name" },
  { label: "标题", field: "subject" },
])
const detailData = ref([])
const visible = ref(false)
const openDtl = async (row) => {
  //
  visible.value = true

  // visible.value = true
  // loading.value = true
  // console.log(111)

  const res = await apiMailReceivedDetail({ mail_id: row.mail_id })
  detailData.value = res.data
}
const handleClose = () => {}

const gotuPage = () => {
  // console.log(props)
  // window.open('https://t.17track.net/zh-cn#nums='+props.logistics.tracking_number)
}
const props = defineProps({
  orderSn: { type: String, default: "" },
})

const activities = ref([])

onMounted(() => {})
const tableRef = ref()

const tableOptions = reactive({
  // maxHeight: "400px",
  showOverflow: true,
  columns: [
    { title: "序号", width: 100, type: "seq" },
    {
      title: "类型",
      width: 100,
      field: "mail_type_desc",
    },
    { title: "发件人", width: 100, field: "sender" },
    { title: "客服人员", width: 100, field: "customer_service_name" },
    { title: "标题", field: "subject" },
    { title: "收件时间", width: 160, field: "receive_time" },
    { title: "回复时间", width: 160, field: "reply_time" },
    {
      title: "操作",
      width: 120,
      params: "right",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {row.mail_type == "system" ? (
                <el-button onClick={() => openDtl(row)} link type="primary">
                  详情查看
                </el-button>
              ) : (
                <el-button onClick={() => gotoCrm(row)} link type="primary">
                  详情查看/回复
                </el-button>
              )}
            </div>
          )
        },
      },
    },
  ],
  proxyConfig: {
    props: { result: "data", total: "total" },
    ajax: {
      query: async ({ page }) => {
        let param = {
          // ...page,
          order_sn: props.orderSn || undefined,
          // order_sn: "1240411597262221",
        }
        // console.log(param)
        let res = await crmOrderPost(param)
        // console.log(res)

        // param.order_sn = param.order_sn ? param.order_sn.split("\n") : []
        let data = { data: res.data.mail?.reverse(), total: 0 }
        // console.log(data)

        return data
      },
    },
  },
})
import action from "@/utils/action.js"
const gotoCrm = (row) => {
  //
  sessionStorage.setItem(
    "crm_reply_table_queryForm",
    JSON.stringify({
      list_type: "mail_manage",
      mail_id: row.mail_id, // 邮件id
      session_id: row.session_id, // 会话id
      query: {
        create_time: [row.receive_time], // 收取时间
        customer_service_ids: [], // 客服人员
      },
    })
  )
  action.setGlobalState({
    changeMicoTabsPath: {
      path: "/crm/emailFolder/myFocus/inbox/reply",
      type: "push",
    },
  })
}
</script>
<style lang="scss" scoped>
:deep(.m-table) {
  .vxe-pager--wrapper {
    display: none;
  }

  // :deep(.vxe-cell) {
  //   max-height: 100% !important;
  //   overflow: visible !important;
  // }
  // :deep(.vxe-body--column) {
  //   padding: 8px 0;
  // }
}

.coup-dialog-mail-detail {
  padding: 8px;
  .detail-container {
    line-height: 42px;
    border: solid 1px #f1f1f1;
    //padding: 8px;
    .item {
      display: flex;
      //padding: 8px;
      box-sizing: border-box;
      flex-direction: row;
      border-bottom: solid 1px #f1f1f1;
      > .title {
        text-align: left;
        padding: 0 12px;
        color: #333333;
        width: 140px;
        border-right: solid 1px #f1f1f1;
        background: #fafafa;
        display: flex;
        align-items: center;
      }
      .value {
        flex: 1;
      }
    }
  }
}
</style>
